<template>
    <div>
        <div class="chartTitle">
            <div class="dateChooser">
                <el-date-picker
                    v-model="dateinput"
                    type="date"
                    placeholder="请选择日期"
                    size='default'
                    @change="pickdate"
                />
            </div>
            <div class="titleText">{{ date+title }}不良柏拉图</div>
            <div class="dateChooser"></div>
        </div>
        <div class="platoChart" ref="platobox"></div>
    </div>
</template>

<script setup>
import { markRaw, onMounted, ref, defineProps, watch } from 'vue'
import * as echart from 'echarts'
const prop = defineProps({
  title:{
    type: String,
    default: ''
  },
  datalist:{
    type: Array,
    default: []
  },
  x:{
    type: Array,
    default: []
  }
})
const date = ref()
const dateinput = ref('')
const data = ref({})

const platobox = ref(null)
const platoChart = ref('')
const platoOption = ref({})

const pickData = (month,day)=>{
  // 根据选择的日期选择需要显示的数据
  prop.datalist.forEach(ele => {
    if(ele.month===month&&ele.day===day){
      data.value = ele
    }
  })
}
const ifArray = (item)=>{
  if(Array.isArray(item)){
    return [...item]
  }else{
    return [item]
  }
}
const setPlatoOption = (item)=>{
  let bardata = ifArray(item.num)
  let linedata = ifArray(item.rate)
  // 根据传值设置图标的option
  platoOption.value = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    xAxis: {
      type: 'category',
      data: prop.x
    },
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 5,
        interval: 1
      },
      {
        type: 'value',
        max: 100,
        min: 0,
        interval: 20,
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],
    series: [
      {
        data: bardata,
        type: 'bar',
        label: {
          color: 'white',
          show: true
        },
        // tooltip: {
        //   valueFormatter: function (value) {
        //     return value;
        //   }
        // }
      },
      {
        type: 'line',
        data: linedata,
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' %';
          }
        }
      }
    ]
  }
}
const createPlatoChart = ()=>{
  // 创建图表
  platoChart.value = markRaw(echart.init(platobox.value))
  setPlatoOption(data.value)
  platoChart.value.setOption(platoOption.value)
}

const pickdate = (value)=>{
  // 选择日期显示
  if(value){
    dateinput.value = value
    let day = value.getDate()
    let month = value.getMonth()+1
    date.value = month+"月"+day+"日"
    pickData(month,day)
  }else{
    value = new Date()
    dateinput.value = value
    let day = value.getDate()
    let month = value.getMonth()+1
    date.value = month+"月"+day+"日"
    pickData(month,day)
  }
}

watch(()=>data.value,()=>{
  platobox.value.removeAttribute('_echarts_instance_')
  createPlatoChart()
})
watch(()=>prop.datalist,()=>{
  platobox.value.removeAttribute('_echarts_instance_')
  createPlatoChart()
})
onMounted(()=>{
  /*
  1. 先获取到父组件传来的prop
  2. 根据prop下的时间匹配目前显示的时间来显示数据
  3. 将相匹配的数据放入data
  4. 根据data设置option
  5. 根据option渲染图标
  6. 当日期变更时再次匹配相同时间的数据进行渲染
  */ 
  pickdate(new Date())
  pickData()
  createPlatoChart()
})
</script>

<style scoped>
.platoChart{
  width: 100%;
  height: calc(100% - 50px);
}
.titleText{
  flex: 1;
  align-self: center;
  text-align: center;
}
.dateChooser{
  width: 20%;
  align-self: center;
  text-align: center;
}
.chartTitle{
  height: 40px;
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>